<!DOCTYPE html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人记账系统</title>
    <link rel="shortcut icon" th:href="@{img/favicon.ico}">
    <link th:href="@{/css/bootstrap/3.3.6/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/css/layui/css/layui.css}" rel="stylesheet" media="all">
    <link th:href="@{/css/temp/index.css}" rel="stylesheet">
    <link th:href="@{/css/all.min.css}" rel="stylesheet">
    <script th:src="@{/js/jquery/2.0.0/jquery.min.js}"></script>
    <script th:src="@{/js/vue/2.5.16/vue.min.js}"></script>
    <script th:src="@{/js/axios/0.17.1/axios.min.js}"></script>
    <script th:src="@{/js/temp/index.js}"></script>
    <script th:src="@{/js/layui/layui.js}"></script>
    <script th:src="@{/js/chart.min/chart.min.js}"></script>
</head>
<body>
<div id="workArea" class="dashboard-container">
    <!-- 弹出层内容 -->
    <div id="userInfo" style="display: none" v-if="user">
        <form class="layui-form user-form">
            <div class="headNurse-info-container">
                <div class="avatar-container">
                    <img v-if="previewSrc" class="layui-upload-img user-avatar" :src="previewSrc">
                    <div class="avatar-placeholder" v-else>
                        <i class="layui-icon layui-icon-user"></i>
                    </div>
                </div>
                <input type="file" style="display: none" @change="handleFileChange" ref="fileInput"/>
                <button type="button" class="layui-btn upload-btn" @click="triggerFileInput">
                    <i class="layui-icon layui-icon-upload"></i> 修改头像
                </button>
                <div class="layui-form-item">
                    <div class="layui-input-group">
                        <div class="layui-input-split layui-input-prefix">
                            <i class="layui-icon layui-icon-username"></i> 用户名
                        </div>
                        <input autocomplete="off" class="layui-input" name="username" type="text" v-model="user.name">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-group">
                        <div class="layui-input-split layui-input-prefix">
                            <i class="layui-icon layui-icon-password"></i> 新密码
                        </div>
                        <input autocomplete="off" class="layui-input" lay-affix="eye" name="newPassword"
                               type="password" v-model="user.password">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-group">
                        <div class="layui-input-split layui-input-prefix">
                            <i class="layui-icon layui-icon-password"></i> 确认密码
                        </div>
                        <input autocomplete="off" class="layui-input" id="reg-password" lay-affix="eye"
                               name="confirmPassword"
                               type="password">
                    </div>
                </div>
            </div>
        </form>
    </div>
    
    <!-- 其他弹出层内容 -->
    <div id='addCategoryInfo' style="display : none" class="layui-form popup-form">
        <div class="form-header">
            <i class="layui-icon layui-icon-add-circle"></i>
            <span>添加分类</span>
        </div>
        <div class="form-item">
            <input placeholder="分类名称" v-model="addOfCategory.name" class="layui-input">
        </div>
        <div class="form-item">
            <select lay-verify="required" v-model="addOfCategory.incomeExpend" lay-filter="addC">
                <option value="">分类类型</option>
                <option :value="0">支出</option>
                <option :value="1">收入</option>
            </select>
        </div>
    </div>
    
    <div id='addAccountInfo' style="display : none" class="layui-form popup-form">
        <div class="form-header">
            <i class="layui-icon layui-icon-add-circle"></i>
            <span>添加账户</span>
        </div>
        <div class="form-item">
            <input placeholder="账户名称" v-model="addOfAccount.accountName" class="layui-input">
        </div>
        <div class="form-item">
            <select lay-verify="required" v-model="addOfAccount.accountType" lay-filter="addA">
                <option value="">账户类型</option>
                <option value="网络账户">网络账户</option>
                <option value="储蓄卡">储蓄卡</option>
                <option value="现金">现金</option>
                <option value="信用账户">信用账户</option>
            </select>
        </div>
        <div class="form-item">
            <input placeholder="账户余额" v-model="addOfAccount.amount" class="layui-input" :change="checkAmount()">
        </div>
    </div>
    
    <div id='addDreamInfo' style="display : none" class="layui-form popup-form">
        <div class="form-header">
            <i class="layui-icon layui-icon-star"></i>
            <span>添加愿望</span>
        </div>
        <div class="form-item">
            <input placeholder="主题" v-model="addDreamInfo.theme" class="layui-input">
        </div>
        <div class="form-item">
            <input placeholder="内容" v-model="addDreamInfo.content" class="layui-input">
        </div>
    </div>
    
    <div id='updateDreamInfo' style="display : none" class="layui-form popup-form">
        <div class="form-header">
            <i class="layui-icon layui-icon-edit"></i>
            <span>编辑愿望</span>
        </div>
        <div class="form-item">
            <input placeholder="主题" v-model="updateDreamInfo.theme" class="layui-input">
        </div>
        <div class="form-item">
            <input placeholder="内容" v-model="updateDreamInfo.content" class="layui-input">
        </div>
    </div>
    
    <div id='updateCategoryInfo' style="display : none" class="popup-form">
        <div class="form-header">
            <i class="layui-icon layui-icon-edit"></i>
            <span>编辑分类</span>
        </div>
        <div class="form-item">
            <input v-model="updateOfCategory.name" class="layui-input" type="text">
        </div>
    </div>
    
    <div id='updateAccountInfo' style="display : none" class="popup-form">
        <div class="form-header">
            <i class="layui-icon layui-icon-edit"></i>
            <span>编辑账户</span>
        </div>
        <div class="layui-form">
            <div class="form-item">
                <div class="layui-input-group">
                    <div class="layui-input-split layui-input-prefix">
                        账户名称
                    </div>
                    <input v-model="updateOfAccount.accountName" class="layui-input">
                </div>
            </div>
            <div class="form-item" v-if="updateRecordInfo.incomeExpend == 0">
                <div class="layui-input-group">
                    <div class="layui-input-split layui-input-prefix">
                        账户类型
                    </div>
                    <select lay-verify="required" v-model="updateOfAccount.accountType" lay-filter="updateAT">
                        <option value="网络账户">网络账户</option>
                        <option value="储蓄卡">储蓄卡</option>
                        <option value="现金">现金</option>
                        <option value="信用账户">信用账户</option>
                    </select>
                </div>
            </div>
            <div class="form-item">
                <div class="layui-input-group">
                    <div class="layui-input-split layui-input-prefix">
                        账户余额
                    </div>
                    <input v-model="updateOfAccount.amount" class="layui-input">
                </div>
            </div>
        </div>
    </div>
    
    <div id='updateRecord' style="display : none" class="popup-form">
        <div class="form-header">
            <i class="layui-icon layui-icon-edit"></i>
            <span>编辑记录</span>
        </div>
        <div class="layui-form">
            <div class="form-item">
                <div class="layui-input-group">
                    <div class="layui-input-split layui-input-prefix">
                        <i class="layui-icon layui-icon-date"></i> 时间
                    </div>
                    <input type="text" class="form-control" id="timeUpdate" v-model="updateRecordInfo.date">
                </div>
            </div>
            <div class="form-item">
                <div class="layui-input-group">
                    <div class="layui-input-split layui-input-prefix">
                        <i class="layui-icon layui-icon-rmb"></i> 金额
                    </div>
                    <input v-model="updateRecordInfo.spend" class="layui-input" :change="checkNewSpend()">
                </div>
            </div>
            <div class="form-item" v-if="updateRecordInfo.incomeExpend == 0">
                <div class="layui-input-group">
                    <div class="layui-input-split layui-input-prefix">
                        <i class="layui-icon layui-icon-list"></i> 类型
                    </div>
                    <select lay-verify="required" v-model="updateRecordInfo.cid" lay-filter="updateC">
                        <option v-for="category in expendCategories" :value="category.id">{{category.name}}</option>
                    </select>
                </div>
            </div>
            <div class="form-item" v-else>
                <div class="layui-input-group">
                    <div class="layui-input-split layui-input-prefix">
                        <i class="layui-icon layui-icon-list"></i> 类型
                    </div>
                    <select lay-verify="required" v-model="updateRecordInfo.cid" lay-filter="updateC">
                        <option v-for="category in incomeCategories" :value="category.id">{{category.name}}</option>
                    </select>
                </div>
            </div>
            <div class="form-item">
                <div class="layui-input-group">
                    <div class="layui-input-split layui-input-prefix">
                        <i class="layui-icon layui-icon-user"></i> 账户
                    </div>
                    <select lay-verify="required" v-model="updateRecordInfo.aid" lay-filter="updateA">
                        <option v-for="account in accounts" :value="account.id">{{account.accountName}}</option>
                    </select>
                </div>
            </div>
            <div class="form-item">
                <div class="layui-input-group">
                    <div class="layui-input-split layui-input-prefix">
                        <i class="layui-icon layui-icon-note"></i> 备注
                    </div>
                    <input v-model="updateRecordInfo.comment" class="layui-input">
                </div>
            </div>
        </div>
    </div>

    <!-- 主内容区域 -->
    <div id="nav">
        <div class="layui-tab layui-tab-brief" lay-filter="demo" id="tab">
            <!-- 导航栏 -->
            <ul class="layui-tab-title nav-enhanced">
                <li class="layui-this"><i class="layui-icon layui-icon-home"></i><span class="nav-text">首页</span></li>
                <li><i class="layui-icon layui-icon-chart"></i><span class="nav-text">消费一览</span></li>
                <li><i class="layui-icon layui-icon-add-circle"></i><span class="nav-text">记一笔</span></li>
                <li><i class="layui-icon layui-icon-list"></i><span class="nav-text">消费分类</span></li>
                <li><i class="layui-icon layui-icon-user"></i><span class="nav-text">账户管理</span></li>
                <li><i class="layui-icon layui-icon-form"></i><span class="nav-text">消费账单</span></li>
                <li><i class="layui-icon layui-icon-set"></i><span class="nav-text">预算设置</span></li>
                <li><i class="layui-icon layui-icon-star"></i><span class="nav-text">愿望清单</span></li>
                <li><i class="layui-icon layui-icon-template-1"></i><span class="nav-text">区块信息</span></li>
            </ul>
            <!-- 右上角用户信息 -->
            <div class="user-info-container">
                <div class="user-info" v-if="user">
                    <img v-if="previewSrc" :src="previewSrc" class="user-avatar">
                    <div class="avatar-placeholder" v-else>
                        <i class="layui-icon layui-icon-user"></i>
                    </div>
                    <span class="user-name">{{user.name}}</span>
                    <div class="user-menu">
                        <div class="menu-item" @click="updateUserInfo()">
                            <i class="layui-icon layui-icon-set"></i> 用户信息
                        </div>
                        <div class="menu-item" @click="quit()">
                            <i class="layui-icon layui-icon-logout"></i> 退出登录
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-tab-content dashboard-content">
                <!-- 首页内容 -->
                <div class="layui-tab-item layui-show">
                    <div class="welcome-container">
                        <div class="welcome-card">
                            <div class="welcome-header">
                                <div class="header-icon-container">
                                    <i class="layui-icon layui-icon-rmb welcome-icon"></i>
                                </div>
                                <h2>欢迎使用个人记账系统</h2>
                            </div>
                            <p class="welcome-text">轻松管理您的个人财务，追踪收入和支出</p>
                            <div class="quick-actions">
                                <div class="quick-action-btn" onclick="document.querySelector('.layui-tab-title li:nth-child(3)').click()">
                                    <i class="layui-icon layui-icon-add-circle"></i>
                                    <span>记一笔</span>
                                </div>
                                <div class="quick-action-btn" onclick="document.querySelector('.layui-tab-title li:nth-child(2)').click()">
                                    <i class="layui-icon layui-icon-chart"></i>
                                    <span>查看统计</span>
                                </div>
                                <div class="quick-action-btn" onclick="document.querySelector('.layui-tab-title li:nth-child(7)').click()">
                                    <i class="layui-icon layui-icon-set"></i>
                                    <span>设置预算</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 消费一览界面 -->
                <div class="layui-tab-item">
                    <div class="overview-container">
                        <div class="overview-header">
                            <h2><i class="layui-icon layui-icon-chart-screen"></i> 本月消费概览</h2>
                            <p class="overview-subtitle">更好地了解您的消费习惯</p>
                        </div>
                        
                        <!-- 将预算建议放在更明显的位置并使用v-show而非v-if -->
                        <div class="budget-advice-container" v-show="true">
                            <div class="budget-advice" :class="{'budget-warning': costChart.budgetWarning}">
                                <i class="layui-icon" :class="costChart.budgetWarning ? 'layui-icon-tips' : 'layui-icon-chart'"></i>
                                <span>{{costChart.budgetAdvice || '消费分析正在加载中..'}}</span>
                            </div>
                        </div>
                        
                        <div class="stats-overview">
                            <div class="stats-card">
                                <div class="stats-icon expense-icon"><i class="layui-icon layui-icon-rmb"></i></div>
                                <div class="stats-info">
                                    <div class="stats-label">本月消费</div>
                                    <div class="stats-value expense-value">¥{{costChart.monthCost}}</div>
                                </div>
                            </div>
                            <div class="stats-card">
                                <div class="stats-icon today-icon"><i class="layui-icon layui-icon-date"></i></div>
                                <div class="stats-info">
                                    <div class="stats-label">今日消费</div>
                                    <div class="stats-value today-value">¥{{costChart.todayCost}}</div>
                                </div>
                            </div>
                            <div class="stats-card">
                                <div class="stats-icon remaining-icon"><i class="layui-icon layui-icon-dollar"></i></div>
                                <div class="stats-info">
                                    <div class="stats-label">本月剩余</div>
                                    <div class="stats-value remaining-value">¥{{costChart.surplusCost}}</div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="overview-charts-container">
                            <!-- 重构扇形图布局 -->
                            <div class="chart-column">
                                <div class="pie-chart-container">
                                    <div class="chart-header">
                                        <h3>消费占比</h3>
                                        <div class="chart-legend">
                                            <span class="legend-item">
                                                <span class="legend-color spent-color"></span>
                                                <span class="legend-text">已消费</span>
                                            </span>
                                            <span class="legend-item">
                                                <span class="legend-color remaining-color"></span>
                                                <span class="legend-text">未消费</span>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="chart-wrapper">
                                        <canvas id="doughnutCost" width="400" height="400"></canvas>
                                    </div>
                                </div>
                                
                                <!-- 将底部三个卡片移到这里 -->
                                <div class="stats-overview secondary-stats">
                                    <div class="stats-card">
                                        <div class="stats-icon avg-icon"><i class="layui-icon layui-icon-chart"></i></div>
                                        <div class="stats-info">
                                            <div class="stats-label">日均消费</div>
                                            <div class="stats-value avg-value">¥{{costChart.dailyAvg}}</div>
                                        </div>
                                    </div>
                                    <div class="stats-card">
                                        <div class="stats-icon daily-icon"><i class="layui-icon layui-icon-release"></i></div>
                                        <div class="stats-info">
                                            <div class="stats-label">日均可用</div>
                                            <div class="stats-value daily-value">¥{{costChart.dailyUse}}</div>
                                        </div>
                                    </div>
                                    <div class="stats-card">
                                        <div class="stats-icon days-icon"><i class="layui-icon layui-icon-log"></i></div>
                                        <div class="stats-info">
                                            <div class="stats-label">距离月末</div>
                                            <div class="stats-value days-value">{{costChart.surplusDay}}天</div>
                                            <div class="progress-container">
                                                <div class="progress-bar" :style="{ width: (30 - costChart.surplusDay) / 30 * 100 + '%' }"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 记一笔界面 -->
                <div class="layui-tab-item">
                    <div class="expense-income-container">
                        <div class="panel panel-info record-panel">
                            <div class="panel-heading">
                                <i class="layui-icon layui-icon-edit"></i> 记录你的每一笔账单
                            </div>
                            <div class="layui-tab layui-tab-brief">
                                <ul class="layui-tab-title record-tab-title">
                                    <li class="layui-this">支出</li>
                                    <li>收入</li>
                                </ul>
                                <div class="layui-tab-content record-tab-content">
                                    <div class="layui-tab-item layui-show">
                                        <div class="panel-body">
                                            <div class="layui-form" action="" lay-filter="formTest">
                                                <div class="record-form-item">
                                                    <label class="record-label">
                                                        <i class="layui-icon layui-icon-rmb"></i> 金额
                                                    </label>
                                                    <div class="record-input">
                                                        <input class="layui-input" v-model="expendRecord.spend"
                                                               :change="checkSpend()" placeholder="输入支出金额">
                                                    </div>
                                                </div>
                                                <div class="record-form-item">
                                                    <label class="record-label">
                                                        <i class="layui-icon layui-icon-note"></i> 备注
                                                    </label>
                                                    <div class="record-input">
                                                        <input class="layui-input" v-model="expendRecord.comment" placeholder="添加备注信息">
                                                    </div>
                                                </div>
                                                <div class="record-form-item">
                                                    <label class="record-label">
                                                        <i class="layui-icon layui-icon-list"></i> 分类
                                                    </label>
                                                    <div class="record-input">
                                                        <select lay-verify="required" v-model="expendRecord.cid"
                                                                lay-filter="selectExpendCategory">
                                                            <option v-for="category in expendCategories"
                                                                    :value="category.id">{{category.name}}
                                                            </option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="record-form-item">
                                                    <label class="record-label">
                                                        <i class="layui-icon layui-icon-user"></i> 账户
                                                    </label>
                                                    <div class="record-input">
                                                        <select lay-verify="required" v-model="expendRecord.aid"
                                                                lay-filter="selectExpendAccount">
                                                            <option v-for="account in accounts" :value="account.id">
                                                                {{account.accountName}}
                                                            </option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="record-form-item">
                                                    <label class="record-label">
                                                        <i class="layui-icon layui-icon-date"></i> 时间
                                                    </label>
                                                    <div class="record-input">
                                                        <input type="text" class="form-control"
                                                               placeholder="yyyy-MM-dd HH-mm-ss" id="timeSelectA"
                                                               v-model="expendRecord.date">
                                                    </div>
                                                </div>
                                            </div>
                                            <button type="button" class="layui-btn expense-btn" @click="addExpendRecord">
                                                <i class="layui-icon layui-icon-add-circle"></i> 记录支出
                                            </button>
                                        </div>
                                    </div>
                                    <div class="layui-tab-item">
                                        <div class="panel-body">
                                            <div class="layui-form" action="" lay-filter="formTest">
                                                <div class="record-form-item">
                                                    <label class="record-label">
                                                        <i class="layui-icon layui-icon-rmb"></i> 金额
                                                    </label>
                                                    <div class="record-input">
                                                        <input class="layui-input" v-model="incomeRecord.spend"
                                                               :change="checkIncome()" placeholder="输入收入金额">
                                                    </div>
                                                </div>
                                                <div class="record-form-item">
                                                    <label class="record-label">
                                                        <i class="layui-icon layui-icon-note"></i> 备注
                                                    </label>
                                                    <div class="record-input">
                                                        <input class="layui-input" v-model="incomeRecord.comment" placeholder="添加备注信息">
                                                    </div>
                                                </div>
                                                <div class="record-form-item">
                                                    <label class="record-label">
                                                        <i class="layui-icon layui-icon-list"></i> 分类
                                                    </label>
                                                    <div class="record-input">
                                                        <select lay-verify="required" v-model="incomeRecord.cid"
                                                                lay-filter="selectIncomeCategory">
                                                            <option v-for="category in incomeCategories"
                                                                    :value="category.id">{{category.name}}
                                                            </option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="record-form-item">
                                                    <label class="record-label">
                                                        <i class="layui-icon layui-icon-user"></i> 账户
                                                    </label>
                                                    <div class="record-input">
                                                        <select lay-verify="required" v-model="incomeRecord.aid"
                                                                lay-filter="selectIncomeAccount">
                                                            <option v-for="account in accounts" :value="account.id">
                                                                {{account.accountName}}
                                                            </option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="record-form-item">
                                                    <label class="record-label">
                                                        <i class="layui-icon layui-icon-date"></i> 时间
                                                    </label>
                                                    <div class="record-input">
                                                        <input type="text" class="form-control"
                                                               placeholder="yyyy-MM-dd HH-mm-ss" id="timeSelectB"
                                                               v-model="incomeRecord.date">
                                                    </div>
                                                </div>
                                            </div>
                                            <button type="button" class="layui-btn income-btn" @click="addIncomeRecord">
                                                <i class="layui-icon layui-icon-add-circle"></i> 记录收入
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 消费分类界面 -->
                <div class="layui-tab-item">
                    <button type="button" class="layui-btn" @click="addLayer" style="margin-left: 91%; width: 130px;background-color: greenyellow;"
                            id="addLayer"><i class="layui-icon layui-icon-addition" ></i> 添加分类
                    </button>
                    <div class="layui-tab layui-tab-brief">
                        <ul class="layui-tab-title">
                            <li class="layui-this">消费分类</li>
                            <li>收入分类</li>
                        </ul>
                        <div class="layui-tab-content">
                            <div class="layui-tab-item layui-show">
                                <table class="table table-striped table-bordered table-hover table-condensed">
                                    <thead>
                                    <tr>
                                        <th class="text-center">分类名称</th>
                                        <th class="text-center">消费次数</th>
                                        <th class="text-center">消费金额</th>
                                        <th class="text-center" style="width: 200px">操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr v-for="category in expendCategories" :key="category.id">
                                        <td class="text-center">{{category.name}}</td>
                                        <td class="text-center">{{category.count}}</td>
                                        <td class="text-center">{{category.totalMoney}} （￥）</td>
                                        <td class="text-center">
                                            <div class="btn-group" v-if="category.uid != 0">
                                                <button type="button" class="layui-btn layui-btn-sm"
                                                        @click="updateCategory(category.id, category.name)">编辑
                                                </button>
                                                <button type="button" class="layui-btn layui-btn-danger layui-btn-sm"
                                                        @click="deleteCategory(category.id)">删除
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="layui-tab-item">
                                <table class="table table-striped table-bordered table-hover table-condensed">
                                    <thead>
                                    <tr>
                                        <th class="text-center">分类名称</th>
                                        <th class="text-center">收入次数</th>
                                        <th class="text-center">收入金额</th>
                                        <th class="text-center" style="width: 200px">操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr v-for="category in incomeCategories" :key="category.id">
                                        <td class="text-center">{{category.name}}</td>
                                        <td class="text-center">{{category.count}}</td>
                                        <td class="text-center">{{category.totalMoney}} （￥）</td>
                                        <td class="text-center">
                                            <div class="btn-group" v-if="category.uid != 0">
                                                <button type="button" class="layui-btn layui-btn-sm"
                                                        @click="updateCategory(category.id, category.name)">编辑
                                                </button>
                                                <button type="button" class="layui-btn layui-btn-danger layui-btn-sm"
                                                        @click="deleteCategory(category.id)">删除
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-tab-item">
                    <button type="button" class="layui-btn" @click="addAccount"
                            style="margin-left: 91%;margin-bottom: 20px; width: 130px;background-color: greenyellow">
                        <i class="layui-icon layui-icon-addition" ></i>添加账户
                    </button>
                    <table class="table table-striped table-bordered table-hover table-condensed">
                        <thead>
                        <tr>
                            <th class="text-center">账户名称</th>
                            <th class="text-center">账户类型</th>
                            <th class="text-center">账户余额</th>
                            <th class="text-center" style="width: 200px">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="account in accounts" :key="account.id">
                            <td class="text-center">{{account.accountName}}</td>
                            <td class="text-center">{{account.accountType}}</td>
                            <td class="text-center">{{account.amount}} （￥）</td>
                            <td class="text-center">
                                <div class="btn-group"> <!-- 使用 Bootstrap 的 btn-group 类 -->
                                    <button type="button" class="layui-btn layui-btn-sm"
                                            @click="updateAccount(account.id, account.accountName, account.accountType, account.amount)">
                                        编辑
                                    </button>
                                    <button type="button" class="layui-btn layui-btn-danger layui-btn-sm"
                                            @click="deleteAccount(account.id)">删除
                                    </button>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <!-- 消费账单页面 -->
                <div class="layui-tab-item">
                    <div class="layui-tab layui-tab-brief">
                        <ul class="layui-tab-title" style="width: 250px; margin:0 auto;">
                            <li class="layui-this">支出记录</li>
                            <li>收入记录</li>
                        </ul>
                        
                        <div class="layui-tab-content">
                            <div class="layui-tab-item layui-show">
                                <div class="charts-container">
                                    <div class="chart-card" style="width:600px; margin-left: 80px; margin-top: 10px; display: inline-block; position: absolute">
                                        <div class="chart-header">
                                            <h3>月度消费分析</h3>
                                        </div>
                                        <canvas id="expendChart"></canvas>
                                    </div>
                                    <div class="chart-card category-chart-card" style="width:600px; margin-top: 400px; margin-left: 80px;display: inline-block; position: absolute">
                                        <div class="chart-header">
                                            <h3>分类统计</h3>
                                        </div>
                                        <div class="pie-container">
                                            <canvas id="expendChartPie"></canvas>
                                        </div>
                                    </div>
                                </div>

                                <div style="display: inline-block">
                                    <ul class="layui-timeline" id="timelineA">
                                        <li class="layui-timeline-item" v-for="bean in expendRecordList">
                                            <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                                            <div class="layui-timeline-content layui-text">
                                                <h3 class="layui-timeline-title">{{bean.date}}</h3>
                                                <P style="font-size: 18px; font-weight: bold">-{{bean.spend}}（¥）
                                                    {{bean.accountName}}</P>
                                                <P>{{bean.categoryName}}</P>
                                                <p>
                                                    备注：{{bean.comment}}
                                                </p>
                                            </div>
                                            <div class="layui-btn-group"
                                                 style="top: 20px; left: 500px;display: inline-block; position: absolute">
                                                <button type="button" class="layui-btn layui-btn-normal"
                                                        @click="updateRecord(bean.id,bean.date,bean.spend,bean.cid,bean.comment,bean.aid,bean.incomeExpend)">
                                                    编辑
                                                </button>
                                                <br>
                                                <button type="button" class="layui-btn layui-btn-danger"
                                                        @click="deleteRecord(bean.id)">删除
                                                </button>
                                            </div>
                                        </li>
                                        <li class="layui-timeline-item">
                                            <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                                            <div class="layui-timeline-content layui-text">
                                                <div class="layui-timeline-title">过去</div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="layui-tab-item">
                                <div class="charts-container">
                                    <div class="chart-card" style="width:600px; margin-left: 80px; margin-top: 10px; display: inline-block; position: absolute">
                                        <div class="chart-header">
                                            <h3>月度收入分析</h3>
                                        </div>
                                        <canvas id="incomeChart"></canvas>
                                    </div>
                                    <div class="chart-card category-chart-card" style="width:600px; margin-top: 400px; margin-left: 80px;display: inline-block; position: absolute">
                                        <div class="chart-header">
                                            <h3>分类统计</h3>
                                        </div>
                                        <div class="pie-container">
                                            <canvas id="incomeChartPie"></canvas>
                                        </div>
                                    </div>
                                </div>
                                <div style="display: inline-block">
                                    <ul class="layui-timeline" id="timelineB">
                                        <li class="layui-timeline-item" v-for="bean in incomeRecordList">
                                            <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                                            <div class="layui-timeline-content layui-text">
                                                <h3 class="layui-timeline-title">{{bean.date}}</h3>
                                                <P style="font-size: 18px; font-weight: bold">+{{bean.spend}}（¥）
                                                    {{bean.accountName}}</P>
                                                <P>{{bean.categoryName}}</P>
                                                <p>
                                                    备注：{{bean.comment}}
                                                </p>
                                            </div>
                                            <div class="layui-btn-group"
                                                 style="top: 20px; left: 500px;display: inline-block; position: absolute">
                                                <button type="button" class="layui-btn layui-btn-normal"
                                                        @click="updateRecord(bean.id,bean.date,bean.spend,bean.cid,bean.comment,bean.aid,bean.incomeExpend)">
                                                    编辑
                                                </button>
                                                <br>
                                                <button type="button" class="layui-btn layui-btn-danger"
                                                        @click="deleteRecord(bean.id)">删除
                                                </button>
                                            </div>
                                        </li>
                                        <li class="layui-timeline-item">
                                            <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                                            <div class="layui-timeline-content layui-text">
                                                <div class="layui-timeline-title">过去</div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-tab-item">
                    <div class="panel panel-info" id="panel5">
                        <div class="panel-heading">本月预算设置（¥）</div>
                        <div class="panel-body">
                            <input type="text" class="form-control" placeholder="本月预算" v-model="config.value"
                                   :change="checkConf()">
                            <button type="button" class="btn btn-primary" @click="setConfig">设置</button>
                        </div>
                    </div>
                </div>

                <div class="layui-tab-item">
                    <button type="button" class="layui-btn" @click="addDream"
                            style="margin-left: 91%;margin-bottom: 20px; width: 130px;background-color: greenyellow">
                        <i class="layui-icon layui-icon-addition" ></i>
                        添加愿望
                    </button>
                    <table class="table table-striped table-bordered table-hover table-condensed">
                        <thead>
                        <tr>
                            <th class="text-center">主题</th>
                            <th class="text-center">状态</th>
                            <th class="text-center">内容</th>
                            <th class="text-center" style="width: 200px">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="dream in dreams" :key="dream.id">
                            <td class="text-center">{{dream.theme}}</td>
                            <td class="text-center">
                                <button type="button" class="layui-btn layui-btn-normal layui-btn-radius"
                                        style="cursor: default" v-if="dream.state === true">已达成
                                </button>
                                <button type="button" class="layui-btn layui-btn-danger layui-btn-radius"
                                        style="cursor: default" v-else>待实现
                                </button>
                            </td>
                            <td class="text-center">{{dream.content}}</td>
                            <td class="text-center">
                                <div class="layui-btn-container">
                                    <div class="btn-group">
                                        <button type="button" class="layui-btn layui-btn-sm"
                                                @click="updateState(dream.id)" v-if="dream.state === false">达成
                                        </button>
                                        <button type="button" class="layui-btn layui-btn-sm layui-btn-disabled"
                                                v-else>达成
                                        </button>
                                        <button type="button" class="layui-btn layui-btn-sm"
                                                @click="updateDream(dream.id, dream.theme, dream.content)">编辑
                                        </button>
                                        <button type="button" class="layui-btn layui-btn-danger layui-btn-sm"
                                                @click="deleteDream(dream.id)">删除
                                        </button>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <div class="layui-tab-item">
                    <h1 style="text-align: center;" >上链数据相关信息</h1>
                    <div class="blockchain-header">
                        <div class="blockchain-icon">
                            <i class="layui-icon layui-icon-template-1"></i>
                        </div>
                        <div class="blockchain-title">
                            <h2>区块链数据记录</h2>
                            <p>安全、透明、不可篡改的账单数据</p>
                        </div>
                    </div>
                    <table class="table table-striped table-bordered table-hover table-condensed" style="margin-top: 30px">
                        <thead>
                        <tr>
                            <th class="text-center">账单合约编号</th>
                            <th class="text-center">账单主要内容</th>
                            <th class="text-center">交易hash</th>
                            <th class="text-center">区块number</th>
                            <th class="text-center">区块hash</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="record in paginatedRecordInfo" :key="record.id">
                            <td class="text-center">{{record.id}}</td>
                            <td class="text-center">{{record.comment}}</td>
                            <td class="text-center">{{record.transactionHash}}</td>
                            <td class="text-center">{{record.blockNumber}}</td>
                            <td class="text-center">{{record.blockHash}}</td>
                        </tr>
                        </tbody>
                    </table>
                    
                    <!-- 分页控件 -->
                    <div class="pagination-container" style="margin-top: 20px; display: flex; justify-content: center; align-items: center;">
                        <div class="page-size-selector" style="margin-right: 20px;">
                            每页显示：
                            <select v-model="pageSize" @change="handlePageSizeChange" class="page-size-select">
                                <option value="5">5条/页</option>
                                <option value="10">10条/页</option>
                                <option value="20">20条/页</option>
                            </select>
                        </div>
                        
                        <div class="pagination-controls">
                            <button @click="goToPage(1)" :disabled="currentPage === 1" class="btn btn-sm btn-primary pagination-btn">首页</button>
                            <button @click="goToPage(currentPage - 1)" :disabled="currentPage === 1" class="btn btn-sm btn-primary pagination-btn">上一页</button>
                            
                            <template v-for="page in displayedPages">
                                <button v-if="page !== '...'" 
                                        @click="goToPage(page)" 
                                        :class="['btn', 'btn-sm', currentPage === page ? 'btn-info' : 'btn-primary', 'pagination-btn']">
                                    {{ page }}
                                </button>
                                <span v-else class="pagination-ellipsis">...</span>
                            </template>
                            
                            <button @click="goToPage(currentPage + 1)" :disabled="currentPage === totalPages" class="btn btn-sm btn-primary pagination-btn">下一页</button>
                            <button @click="goToPage(totalPages)" :disabled="currentPage === totalPages" class="btn btn-sm btn-primary pagination-btn">尾页</button>
                            
                            <span class="pagination-info">{{ currentPage }} / {{ totalPages }}</span>
                            
                            <div class="jump-page-container">
                                <span>跳转到：</span>
                                <input v-model.number="jumpToPage" type="number" min="1" :max="totalPages" class="jump-page-input">
                                <button @click="goToPage(jumpToPage)" class="btn btn-sm btn-primary pagination-btn jump-btn">确定</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 回到顶部按钮 -->
<div class="back-to-top" @click="toTop" :class="{ 'show': isShowBackToTop }">
    <i class="layui-icon layui-icon-up"></i>
</div>

</body>
</html>